<template>
  <div class="br-layout-relative">
    <el-dialog :title="dialogName" :destroy-on-close="true" :visible.sync="dialog" :close-on-click-modal="false"
      :modal-append-to-body="false" append-to-body :show-close="false" center>
      <span slot="title">{{dialogName}}</span>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px" size="mini">
        <el-form-item label="步骤名称" prop="label">
          <span slot="label" class="br-form-text">步骤名称</span>
          <el-input v-model="form.label" placeholder="请输入步骤名称"></el-input>
        </el-form-item>
        <el-form-item label="数据库连接" prop="connection">
          <span slot="label" class="br-form-text">数据库连接</span>
          <el-select v-model="form.connection" placeholder="请选择数据连接" style="width: 100%;">
            <el-option :label="item" :value="item" v-for="(item,index) in databaseNames" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="SQL">
          <span slot="label" class="br-form-text">SQL</span>
          <el-popover placement="right-start" title="" width="400" trigger="manual" v-model="visible">
            <DBTree :connection="form.connection" v-if="visible" @achieve-table="getTable"></DBTree>
            <el-button slot="reference" @click="showDBTree" size="mini" style="float: right">获取SQL语句</el-button>
          </el-popover>
        </el-form-item>
        <el-form-item label="" prop="sql">
          <SQLEditor ref="SQLEditor" :code="form.sql"></SQLEditor>
        </el-form-item>
        <el-form-item label="简易转换" prop="lazy_conversion_active">
          <span slot="label" class="br-form-text">简易转换</span>
          <el-checkbox true-label="Y" false-label="N" v-model="form.lazy_conversion_active"></el-checkbox>
        </el-form-item>
        <el-form-item label="替换变量" prop="variables_active">
          <span slot="label" class="br-form-text">替换变量</span>
          <el-checkbox true-label="Y" false-label="N" v-model="form.variables_active"></el-checkbox>
        </el-form-item>
        <el-form-item label="从步骤中获取数据" prop="compare">
          <span slot="label" class="br-form-text">从步骤中获取数据</span>
          <el-select v-model="form.lookup" placeholder="" style="width: 100%;">
            <el-option :label="item" :value="item" v-for="(item,index) in previousSteps" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="执行每一行" prop="variables_active">
          <span slot="label" class="br-form-text">执行每一行</span>
          <el-checkbox :disabled="!form.lookup" true-label="Y" false-label="N" v-model="form.execute_each_row"></el-checkbox>
        </el-form-item>
        <el-form-item label="记录数量限制" prop="limit">
          <span slot="label" class="br-form-text">记录数量限制</span>
          <el-input  v-model="form.limit" placeholder="请输入记录数量限制"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="mini" @click="closeDialog">取 消</el-button>
        <el-button type="primary" size="mini" @click="getAttributes">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import TransStepBaseMixin from '@/mixins/TransStepBaseMixin'
  import {
    explorer,
    getSQL
  } from '@/api/database/database'
  export default {
    name: 'TableInput',
    mixins: [TransStepBaseMixin],
    data() {
      return {
        visible: false,
        previousSteps: [],
        databaseNames: [],
        schemaName: "",
        tableName: "",
        form: {
          label: '',
          connection: '',
          sql: '',
          lazy_conversion_active: "N",
          variables_active: "N",
          lookup: "",
          execute_each_row: "N",
          limit: 0
        },
        rules: {
          label: {
            required: true,
            message: '步骤名称为必填项',
            trigger: 'blur'
          },
          connection: {
            required: true,
            message: '数据连接为必选项',
            trigger: 'blur'
          },
          sql: {
            required: true,
            message: 'SQL语句为必填项',
            trigger: 'blur'
          },
          limit: [{
            required: true,
            message: '记录数量限制为必填项',
            trigger: 'blur'
          }]
        },
        previewColumns: [],
        previewData: []
      }
    },
    methods: {
      showDBTree() {
        if (!this.form.connection) {
          this.$alert('请选择一个数据连接', '提示', {
            confirmButtonText: '确定',
            callback: action => {}
          });
          return;
        }
        this.visible = true;
      },
      getTable(schemaName, tableName) {
        this.visible = false;
        this.schemaName = schemaName;
        this.tableName = tableName;
        this.getSQL();
      },
      getSQL() {
        this.$confirm('是否在SQL里面包含字段名吗?', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        }).then(() => {
          this.createSQL(true);
        }).catch(() => {
          this.createSQL(false);
        });
      },
      createSQL(flag) {
        let params = {
          graphXml: this.getExportModelXML(),
          connection: this.form.connection,
          schema: this.schemaName,
          table: this.tableName,
          yes: flag
        }
        getSQL(params).then((res) => {
          if (res.data.status === 200) {
            this.form.sql = res.data.data;
            this.$refs.SQLEditor.setValue(res.data.data);
          }
        })
      }
    },
    created() {},
    mounted() {
      this.databaseNames = this.getDatabaseNames();
      this.previousSteps = this.getPreviousSteps();
    }
  };
</script>

<style lang="less" scoped>
  /deep/ .el-dialog {
    width: 550px;
    height: 650px
  }
</style>
